<template>
	<view>
		<u-popup v-model="showLogin" mode="bottom" :borderRadius="20" :closeable="true" @close="close">
			<view class="m-popup-login">
				<view class="m-popup-title">
					<text>登录解锁更多精彩</text>
				</view>
				<view class="m-popup-logo">
					<image src="@/static/index/logo.png" mode=""></image>
				</view>
				<view class="m-popup-name">
					<text>吉泰酒店集团在线订房</text>
				</view>
				<button v-if="agree" class="m-popup-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneFun">
					<text>手机号一键登录</text>
				</button>
				<view v-else @click="tipFun" class="m-popup-btn">
					<text>手机号一键登录</text>
				</view>
				<view class="m-popup-text">
					<view class="m-popup-radio" @click="agree = !agree">
						<image v-if="!agree" src="@/static/index/radio.png" mode=""></image>
						<image v-else src="@/static/index/radio-select.png" mode=""></image>
					</view>
					<view class="">
						<text>已阅读并同意</text>
						<text style="color:#8F6F4C;"
							@click="to_link('/pages2/user-text/user-text')">吉泰酒店集团在线订房会员协议、隐私政策</text>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- <u-popup v-model="showMobileLogin" mode="bottom" :borderRadius="20"  :closeable="true" @close="close">
			<view class="m-popup-login">
				<view class="m-popup-title">
					<text>登录解锁更多精彩</text>
				</view>
				<view class="m-popup-logo">
					<image src="@/static/index/logo.png" mode=""></image>
				</view>
				<view class="m-popup-name">
					<text>吉泰酒店集团在线订房</text>
				</view>
				<view class="m-popup-btn">
					<text>获取微信手机号</text>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import {get_userInfo} from "@/common/function/api_fun.js"
	export default {
		name: "m-login",
		data() {
			return {
				agree: false,
				showLogin: false,
				showMobileLogin: false
			};
		},
		created() {
			uni.$on('login',()=>{
				this.showLogin = true
			})
			uni.$on('loginSuccess',()=>{
				this.showLogin = false
			})
			uni.$on('loginClose',()=>{
				this.showLogin = false
			})
		},
		destroyed() {
			this.close()
		},
		methods: {
			tipFun(){
				this.$m.msg('请查看并勾选用户协议和隐私政策')
			},
			getPhoneFun(e) {
				uni.$emit('loginSuccess')
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					let {
						encryptedData,
						iv
					} = e.detail
					this.$http.getJson('users_bindWxPhone', {
						encryptedData,
						iv
					}).then(res => {
						if (res.code == 1) {
							let info = res.data
							uni.setStorageSync('token', info.token)
							uni.setStorageSync('user_id', info.user_id)
							get_userInfo()
							uni.$emit('loginSuccess')
							this.$m.msg('登录成功')
						} else {
							this.$m.msg(res.message)
						}
					})
				}
			},
			close() {
				this.showLogin = false
				uni.$emit('loginClose')
			}
		}
	}
</script>

<style lang="scss">
	.m-popup-login {
		position: relative;
		background: #F6F6F6;
		height: 920rpx;

		.m-popup-title {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 36rpx 0 60rpx;
			font-size: 36rpx;
			color: #33302D;
			font-weight: 600;
		}

		.m-popup-logo {
			display: flex;
			justify-content: center;

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.m-popup-name {
			font-size: 32rpx;
			color: #000000;
			font-weight: 600;
			text-align: center;
			padding-top: 15rpx;
			
		}

		.m-popup-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 690rpx;
			height: 104rpx;
			line-height: 104rpx;
			background: #D3A358;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 32rpx;
			color: #fff;
			margin-left: 30rpx;
			margin-top: 60rpx;
			&::after{
				content: '';
				border: 0;
			}
		}

		.m-popup-text {
			position: absolute;
			bottom: 100rpx;
			width: 750rpx;
			display: flex;
			align-items: center;
			padding-left: 25rpx;
			font-size: 26rpx;
			color: #33302D;

			.m-popup-radio {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>